import React, { useRef, useState } from "react"
import useUpdate from "../../hooks/useUpdate.ts"

const CompareUseRefAndUseState = () => {
  const [countState, setCountState] = useState(0)
  const countRef = useRef(0)
  const update = useUpdate()

  console.log("组件渲染了一次")

  const incrementStateCount = () => {
    setCountState(countState + 1)
  }

  const incrementRefCount = () => {
    countRef.current += 1
    // update() // 手动触发更新
  }

  return (
    <div>
      <h1>Compare UseRef and useState</h1>
      <p>Count State: {countState}</p>
      <div>
        <button onClick={incrementStateCount}>点击 countState + 1</button>
      </div>
      <p>Count Ref: {countRef.current}</p>
      <div>
        <button onClick={incrementRefCount}>点击 countRef + 1</button>
      </div>
    </div>
  )
}

export default CompareUseRefAndUseState
